<template>
  <div id="uploadSigNature">
    <vxe-modal v-model="signatureDialogShowHide" width="600" height="400" destroy-on-close>
      <template #title>
        <span>电子签名</span>
      </template>
      <template #default>
        <!-- <div class="flex justify-start signature" style="height: 400px"> -->
        <div style="width: 20vw">
          <el-upload ref="sigatureRef" class="upload-demo" :data="paramData" :action="uploadFilePath" :limit="1" list-type="picture" :on-preview="handlePictureCardPreview" :file-list="fileList" :on-remove="fileRemove" :on-change="handleChange" :on-exceed="handleExceed" :before-remove="beforeRemove">
            <!-- :on-success="RefreshSignature" -->
            <el-button type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="font-size: 14px; margin: 6px">只能上传jpg/png文件,且不超过8M</div>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
let { proxy }: any = getCurrentInstance();
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { IsEmpty } from '@/utils/common';

// 全局变量定义区 ==========
let employeeId = ''; //接收传过来的员工id
let filePath = ref<String>(); //没用到？？
// 请求参数数据
const paramData = reactive({
  id: employeeId //员工id
});

// 默认上传文件列表
let fileList = reactive([
  {
    name: 'eleSignature.jpeg',
    url: ''
  }
]);
let signatureDialogShowHide = ref(false);/**电子签名弹窗显示 */
const dialogImageUrl = ref('');
const dialogVisible = ref(false);

//暴露属性和方法
defineExpose({
  init
});
// 方法定义区 =============
function init(item: any) {
  signatureDialogShowHide.value = true;
  fileList.length = 0;
  // 如果item.id员工id存在说明是编辑赋值 否则就是新建
  if (!IsEmpty(item.id)) {
    employeeId = item.id; //员工id
    // 获取电子签名数据
    proxy.$nextTick(() => {
      getSignatureFile(employeeId);
    });
  } else {
    employeeId = '';
  }
}
// 文件列表的改变
const handleChange: UploadProps['onChange'] = (uploadFile: any, uploadFiles: any) => {
  // fileList = fileList.slice(1);
  fileList.length = 0;
  getSignatureFile(employeeId);
};

// 超出数量提示
const handleExceed: UploadProps['onExceed'] = (files: any, uploadFiles: any) => {
  VxeMessage('一个员工只可上传一个电子签名', VxeNotifyType.warning);
};

// 预览文件事件
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

// 移除文件
function fileRemove(file: any, fileList: any) {
  // console.log(file, fileList);
  fileList = [];
}
// 删除前
function beforeRemove() { }



// 获取电子签名
function getSignatureFile(id: any) {
  // console.log('员工id', id);
  if (!IsEmpty(id)) {
    const url = '/api/user/getSignatureFile/' + id;
    paramData.id = id;
    // console.log('paramData.id', id);
    proxy.$http
      .get(url)
      .then((res: any) => {
        //fileList[0].url = (window as any).apiUrl.VITE_SERVER_URL + res.data;
        fileList.push({
          name: 'eleSignature.jpeg',
          url: (window as any).apiUrl.VITE_SERVER_URL + res.data
        });
        // console.log('获取的电子签名url', fileList[0].url);
        if (res.status.code === 1) {
          // VxeMessage('获取电子签名成功', VxeNotifyType.success);
        }
        return;
      })
      .catch((err: any) => {
        // VxeMessage('获取电子签名失败','error')
      });
  }
}

// 上传电子签名配置
const uploadFilePath = ref((window as any).apiUrl.VITE_SERVER_URL + '/api/user/uploadSignatureFile');

// 关闭弹窗
function closeDialog() {
  proxy.$emit('closePerDialog');
}
</script>

<style lang="scss" scoped>
#uploadSigNature {
  position: relative;
  height: 100%;
  .dialog-footer {
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
}
</style>
